<template>
	<div class="common-interpolate" v-for="(item,index) in data" @click="communityClick(item)">
		<div class="common-interpolate-image">
			<img  :src="item.image_path?item.image_path:require('../assets/image/icon-defalut.png')" @error="(e)=>{e.target.src = require('../assets/image/icon-defalut.png')}" @click="communityClick(item)" >
		</div>
		<div class="common-interpolate-bottom">
			<div class="common-interpolate-bottom-info">
				<span class="common-interpolate-bottom-photo">
					<img :src="item.avatar?item.avatar:require('../assets/image/icon-defalut.png')" @error="(e)=>{e.target.src = require('../assets/image/icon-defalut.png')}" >
				</span>
				<div class="common-interpolate-bottom-info-right">
					<span>{{item.create_time}}</span>
					<div class="right-type">
						<span>{{item.nickName}}</span>
					</div>
				</div>
			</div>
			<h3>{{item.title}}</h3>
			<div class="common-interpolate-bottom-type">
				<span>{{item.job_type_name}}</span>
				<span><el-icon><LocationFilled /></el-icon>{{item.job_address_name}}</span>
			</div>
			<p v-html="item.content.replace(/<[^>]+>/g, '')" class="common-interpolate-bottom-dec">
			</p>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import {LocationFilled,View} from '@element-plus/icons-vue'
	import {selectCity} from '../public/selectCity'
	import {
		ref
	} from 'vue'
	import {
		useRouter
	} from 'vue-router'
	const router = useRouter();
	const emits = defineEmits(['delete'])
	const props = defineProps({
		data: Array,
		deleteShow: Boolean
	})
	const communityClick = (item) => {
		router.push({
			path: '/communityDetail',
			query: {
				id: item.id
			}
		})
	}
	const deleteClick = (id) => {
		emits("delete", id)
	}
</script>

<style lang="scss">
	.common-interpolate{
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		width: 200px;
		height: 240px;
		background-color: white;
		border-radius: 8px;
		padding: 10px;
		box-sizing: border-box;
		position: relative;
		margin-right: 20px;
		margin-bottom: 40px;
		cursor: pointer;
		.common-interpolate-image{
			width: 100%;
			height: 45%;
			img{
				width: 100%;
				height: 100%;
				object-fit: cover;
				border-radius: 8px;
			}
		}
		.common-interpolate-bottom{
			width: 100%;
			height: 55%;
			h3{
				font-size: 14px;
				margin: 10px 0 10px 0;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
			.common-interpolate-bottom-type{
				margin: 5px 0;
				display: flex;
				span{
					font-size: 12px;
					background-color: rgba(29,101,255,0.1);
					padding: 3px;
					border-radius: 3px;
					box-sizing: border-box;
					margin-right: 5px;
					display: flex;
					align-items: center;
					overflow:hidden;
					white-space:nowrap;
					text-overflow:ellipsis;
					
					&:nth-of-type(1){
						max-width: 60%;
					}
					&:nth-of-type(2){
						max-width: 40%;
					}
				}
			}
			.common-interpolate-bottom-dec{
				font-size: 12px;
				color: #60616c;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2!important;
				overflow: hidden;
				margin: 0;
				line-height: 20px;
				margin-top: 6px;
			}
			.common-interpolate-bottom-info{
				position: absolute;
				bottom: -20px;
				left: 10px;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: calc(100% - 20px);
				.common-interpolate-bottom-photo{
					width: 40px;
					height: 40px;
					border-radius: 3px;
					display: block;
					overflow: hidden;
					img{
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
				.common-interpolate-bottom-info-right{
					span{
						width: 100%;
						height: 50%;
						display: block;
						line-height: 20px;
						padding: 0 5px;
						&:nth-child(1){
							color: #848484;
							font-size: 12px;
						}
						
						
					}
					.right-type{
						color: #666666;
						font-size: 12px;
						display: flex;
						align-items: center;
						justify-content: space-between;
						span{
							display: flex;
							align-items: center;
							overflow:hidden;
							white-space:nowrap;
							text-overflow:ellipsis
							
						}
					}
				}
			}
			
		}
		
	}
</style>
